<template>
 <el-card  shadow="never" >
   <div>
      <div class="columns">
        <div>
          <el-avatar :src="`https://cn.gravatar.com/avatar/${comment.userId}?s=164&d=identicon`"></el-avatar>
        </div>
        <div class="ml-3">
          <strong>{{ comment.alias }}</strong>
          <small class="ml-3">{{ comment.createTime | date }}</small>
          <p class="content">{{ comment.content }}</p>
        </div>
      </div>
      <div v-if="token && comment.userId === user.id" class="columns level-right">
        <a class="level-item">
          <span class="tag" @click="handleDelete(comment.id)">
            <i class="el-icon-delete">{{$t('common.delete')}}</i>
          </span>
        </a>
      </div>
   </div>
 </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import {deleteComment} from '@/api/comment'
export default {
  name: 'LvCommentsItem',
  props: {
    comment: {
      type: Object,
      required: true
    }
  },
  computed: {
    ...mapGetters(['token', 'user'])
  },
  methods:{
    handleDelete(id){
      deleteComment(id).then(value => {
        const { code, message } = value
        if (code === 200) {
          this.$message.success(`Delete successfully`)
          setTimeout(() => {
            this.$emit('flash', this.comment.topicId)
          }, 500)
        }
      })
    }
  }
}
</script>
<style scoped>
p{
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}
</style>